<template>
  <el-card>
    <el-row
      :gutter="20"
      :class="[Wwidth > 800 ? 'show-container' : 'show-container-phone']"
    >
      <el-col :span="7">
        <el-input
          placeholder="请输入搜索内容"
          clearable
          v-model="queryForm.tabTypename"
          class="input-style"
        ></el-input>
      </el-col>

      <el-button
        type="primary"
        :icon="Search"
        @click="initGetTab"
        class="button-style"
        >搜索</el-button
      >
      <el-button type="primary" @click="HandleDialog(row)" class="button-style"
        >添加</el-button
      >
      <el-button type="primary" @click="exportExcel(title)"> EXCEL </el-button>
    </el-row>

    <el-table :data="tableData" class="table-style" id="table1">
      <el-table-column
        :width="item.width"
        :prop="item.prop"
        :label="item.label"
        v-for="(item, index) in options"
        :key="index"
      >
        <template #default="{ row }" v-if="item.prop === 'actions'">
          <el-button
            type="danger"
            size="small"
            :icon="Delete"
            @click="DeleteTab(row.noticeid)"
          ></el-button>
        </template>
        <template v-slot="{ row }" v-else-if="item.prop === 'noticetime'">
          {{ days(row.noticetime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:currentPage="queryForm.pagenum"
      v-model:page-size="queryForm.pagesize"
      :page-sizes="[5, 10, 15, 20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <Dialog
    v-model="dialogVisible"
    :dialogTitle="dialogTitle"
    :dialogTableValue="dialogTableValue"
    @initGetTab="initGetTab"
  />
</template>

<script setup>
import { ref } from 'vue'
// import { deleteNotice } from '@/api/productTab'
import { getNotice, deleteNotice } from '@/api/notice'
import { options } from './options'
import { Search, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Dialog from './components/dialog.vue'
import { exportExcel } from '@/utils/exportExcel.js'
const pagenum = ref(0)
const pagesize = ref(10)
const total = ref(0)
const queryForm = ref({})
const days = require('dayjs')
const title = ref('公告信息')
const dialogVisible = ref(false)
const dialogTitle = ref('')
const tableData = ref([])
const dialogTableValue = ref({})

const Wwidth = ref()
const Wheight = ref()
// 我的电脑的浏览器窗口尺寸:宽度：1535;高度：794
const getwindow = () => {
  Wwidth.value = document.documentElement.clientWidth
  Wheight.value = document.documentElement.clientHeight
}
getwindow()
const initGetTab = async () => {
  if (queryForm.value.tabTypename !== '') {
    const res = await getNotice(
      pagenum.value,
      pagesize.value,
      queryForm.value.tabTypename
    )
    // console.log(res)
    tableData.value = res.notices.records
    total.value = res.total
  } else {
    const res = await getNotice(pagenum.value, pagesize.value)
    // console.log(res)
    total.value = res.total
    tableData.value = res.notices.records
  }
}
initGetTab()
const handleSizeChange = (pageSize) => {
  pagenum.value = 1
  pagesize.value = pageSize
  initGetTab()
}
const handleCurrentChange = (pageNum) => {
  pagenum.value = pageNum
  initGetTab()
}

const HandleDialog = (row) => {
  dialogTitle.value = '新增公告'
  dialogTableValue.value = {}
  dialogVisible.value = true
}
const DeleteTab = async (id) => {
  // console.log(id)

  ElMessageBox.confirm('确定删除吗，删除后无法恢复', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await deleteNotice(id)
      initGetTab()
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消'
      })
    })
}
</script>

<style lang="scss" scoped>
.show-container {
  .table-style {
    width: 100%;
  }
}

.show-container-phone {
  position: relative;
  .input-style {
    width: 100px;
  }
  .button-style {
    margin-left: 20px;
    position: relative;
    font-size: 10px;
    width: 60px;
  }
  .table-style {
    position: absolute;
    width: 100%;
  }
}
</style>
